<template>
  <div>
    <a-modal
      title="公告详情"
      :visible="detailVisible"
      :confirm-loading="confirmLoading"
      width="60%"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <div v-html="info" class="content"></div>
      <template v-slot:footer>
        <div class="annex">
          <span style="font-size: 15px">附件：</span>
          <div>
            <div v-for="index in 3" :key="index" class="annex-down">
              xxx各部门报送项目分类表.doc <i class="iconfont icon-xiazai"></i>
            </div>
          </div>
        </div>
        <div class="footer">
          <a-button type="primary" style="width: 200px" @click="forwardNotice">
            转发公告
          </a-button>
        </div>
      </template>
    </a-modal>

    <!-- 转发 -->
    <a-modal
      title="公告转发"
      :visible="visibleForward"
      :confirm-loading="confirmLoading"
      width="60%"
      @ok="handleOkForward"
      @cancel="handleCancelForward"
    >
      <div class="content">富文本框</div>
      <template v-slot:footer>
        <div class="annex">
          <span style="font-size: 15px">附件：</span>
          <div>
            <div v-for="index in 3" :key="index" class="annex-down">
              xxx各部门报送项目分类表.doc <i class="iconfont icon-guanbi"></i>
            </div>
            <div class="upload-annex">
              <i class="iconfont icon-shangchuan icon"></i>
              <div>上传附件</div>
            </div>
          </div>
        </div>
        <!-- 通知范围 -->
        <div class="notice-people">
          <a-space :size="size">
            <span>公告通知范围：</span>
            <a-select
              style="min-width: 200px"
              mode="multiple"
              :default-value="['a1', 'b2']"
              placeholder="Please select"
              @change="handleChange"
            >
              <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                {{ (i + 9).toString(36) + i }}
              </a-select-option>
            </a-select>
          </a-space>
        </div>
        <div class="footer">
          <a-button type="primary" style="width: 100px"> 发布 </a-button>
          <a-button type="primary" ghost style="width: 100px" @click="handleCancelForward"> 取消 </a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ModalText: "Content of the modal",
      detailVisible: false,
      visibleForward: false,

      confirmLoading: false,
      info: `<p>原始<b>文字</b>是人类用来纪录特定事物、简化<a href="https://zh.wikipedia.org/wiki/%E5%9C%96%E5%83%8F" class="mw-redirect" title="图像">图像</a>而成的书写<a href="https://zh.wikipedia.org/wiki/%E7%AC%A6%E8%99%9F" class="mw-redirect" title="符号">符号</a>。文字在发展早期都是<a href="https://zh.wikipedia.org/wiki/%E5%9B%BE%E7%94%BB" class="mw-redirect" title="图画">图画</a>形式的，有些是以形表意，有些是以形表音，其中有<b><a href="https://zh.wikipedia.org/wiki/%E5%BD%A2%E6%84%8F%E6%96%87%E5%AD%97" class="mw-redirect" title="形意文字">表意文字</a>（<a href="https://zh.wikipedia.org/wiki/%E8%B1%A1%E5%BD%A2%E6%96%87%E5%AD%97" title="象形文字">象形文字</a>，即以形表意的文字）</b>，与<a href="https://zh.wikipedia.org/wiki/%E8%AA%9E%E9%9F%B3" title="语音">语音</a>无甚关系，<a href="https://zh.wikipedia.org/wiki/%E4%B8%AD%E5%9C%8B%E6%96%87%E5%AD%97" class="mw-redirect" title="中国文字">中国文字</a>便是从此渐次演变而成。有些中文字可以从表面、<a href="https://zh.wikipedia.org/wiki/%E9%83%A8%E9%A6%96" title="部首">部首</a>、字旁看到一些联系旁通的字义。而这些特色是<a href="https://zh.wikipedia.org/wiki/%E6%8B%BC%E9%9F%B3%E6%96%87%E5%AD%97" title="拼音文字">拼音文字</a>所没有的</p>`,
    };
  },
  methods: {
    /**
     * 去转发
     */
    forwardNotice() {
      this.detailVisible = false;
      this.visibleForward = true;
    },

    showModal() {
      this.detailVisible = true;
    },
    handleOk() {
      this.ModalText = "The modal will be closed after two seconds";
      this.confirmLoading = true;
      setTimeout(() => {
        this.detailVisible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    handleCancel() {
      console.log("Clicked cancel button");
      this.detailVisible = false;
    },
    /**
     * 公告转发确定
     */
    handleOkForward() {
      this.visibleForward = false;
    },
    /**
     * 公告转发取消
     */
    handleCancelForward() {
      this.visibleForward = false;
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  text-align: center;
  padding: 20px 0;
  position: relative;
}
.annex {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  & > div {
    color: #00796a;
    .annex-down {
      cursor: pointer;
    }
  }
}
.content {
  margin: 20px 0;
}
.upload-annex {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 16px;
  cursor: pointer;

  .icon {
    font-size: 20px;
  }
  .notice-people {
    position: absolute;
    bottom: 20px;
    left: 20px;
  }
}
</style>